<template>
  <div class="nursing-home-card" @click="
      $toPage(
        `/pages/djzh/activityDetail?indexCode=${row.indexCode}&isAudit=false`
      )
    ">
    <div class="card-image">
      <img :src="row.itemCoverUrl" />
    </div>
    <div
      :class="[
        'status-tag',
        row.itemStatus === '0' || row.itemStatus === '2' ? 'ended' : '',
      ]"
      v-if="!isAudit"
    >
      {{ row | itemStatusFilter }}
    </div>
    <div
      :class="[
        'status-tag',
        row.approvalStatus === '0' || row.approvalStatus === '2' ? 'ended' : '',
      ]"
      v-else
    >
      {{ row | itemApprovalStatusFilter }}
    </div>
    <div class="card-content">
      <h3 class="title">
        {{ row.itemTitle }}
        <!-- <article-tag text="活动" size="small"/> -->
      </h3>
      <div class="info-item">
        <span class="label">负责人：</span>
        <span class="value">{{ row.itemPerson }}</span>
      </div>
      <div class="info-item">
        <span class="label">时间：</span>
        <span class="value">{{ row.itemStartTime }}</span>
      </div>
      <div
        class="info-item"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div style="flex: 1">
          <span class="label">地点：</span>
          <span class="value">{{ row.itemAddr }}</span>
        </div>
        <div>
          <van-button
            type="primary"
            round
            style="height: 38px"
            @click.stop="$toPage(`/pages/signIn?id=${row.indexCode}`)"
            v-if="showSign && !isSign"
            >签到</van-button
          >
          <van-button
            type="primary"
            round
            style="height: 38px"
            :disabled="row.itemStatus !== '1'"
            v-if="!isAudit && !hideApply && !isSign && !showSign"
            @click.stop="submit"
            >我要报名</van-button
          >
        </div>
      </div>
    </div>
    <!--    <van-button type="primary" round style="height: 38px" class="b-but" v-else @click.stop="$toPage(`/pages/djzh/activityDetail?indexCode=${row.indexCode}&isAudit=${isAudit}`)">详情</van-button>-->
    <activity-detail-submit
      ref="activity"
      :appointment-type="row.itemType"
      :item-title="row.itemTitle"
      :item-index-code="row.indexCode"
    />
  </div>
</template>

<script>
import ArticleTag from '../../../components/ArticleTag.vue'
import ActivityDetailSubmit from './ActivityDetailSubmit.vue'
import dayjs from 'dayjs'
import { Dialog, Toast } from 'vant'
import { tbAppointmentSave } from '../../../api/tbAppointment'
import { mapGetters } from 'vuex'
export default {
  components: { ArticleTag, ActivityDetailSubmit },
  name: 'NursingHomeCard',
  props: {
    row: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    isAudit: {
      type: Boolean,
      default: false,
    },
    hideApply: {
      type: Boolean,
      default: false,
    },
    isSign: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    showSign() {
      const now = dayjs()
      const startTime = dayjs(this.row.itemStartTime)
      return now.isAfter(startTime)
    },
    ...mapGetters(['userInfo']),
  },
  filters: {
    itemStatusFilter({ itemScore, itemStatus }) {
      if (itemStatus === '0') {
        return `待开始·${itemScore}积分`
      } else if (itemStatus === '1') {
        return `进行中·${itemScore}积分`
      } else if (itemStatus === '2') {
        return `已结束·${itemScore}积分`
      }
    },
    itemApprovalStatusFilter({ itemScore, approvalStatus }) {
      if (approvalStatus === '0') {
        return `未审核·${itemScore}积分`
      } else if (approvalStatus === '1') {
        return `已审核·${itemScore}积分`
      } else if (approvalStatus === '2') {
        return `未通过·${itemScore}积分`
      }
    },
  },
  methods: {
    submit() {
      const _this = this
      const { itemType, itemTitle, indexCode } = _this.row
      const formData = {
        appointmentType: itemType,
        itemIndexCode: indexCode,
        appointmentUserId: _this.userInfo.userId,
        appointmentName: itemTitle,
        appointmentPersonName: _this.userInfo.personName,
        appointmentPhone: _this.userInfo.phone,
      }
      Dialog.confirm({
        title: '提示',
        message: '是否确认提交?',
      })
        .then(() => {
          _this.$showLoading('提交中...')
          tbAppointmentSave(formData)
            .then(() => {
              _this.$hideLoading()
              _this.show = false
              this.$emit('success')
              Toast.success('提交成功')
            })
            .catch(() => {
              _this.$hideLoading()
            })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.nursing-home-card {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: $uni-color-success;
  margin-bottom: 12px;
  position: relative;
  .status-tag {
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 0 8px 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    background: #66c2ff;
    color: #f8e4a7;
    &.ended {
      background: #c8d6cf;
      color: #333;
    }
  }
  .b-but {
    position: absolute;
    bottom: 12px;
    right: 16px;
  }
  .card-image {
    height: 100px;
    overflow: hidden;
    padding: 14px 14px 0 14px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .card-content {
    padding: 14px;

    .title {
      font-size: 18px;
      color: $uni-color-primary;
      font-weight: bold;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .info-item {
      margin-bottom: 10px;
      font-size: 14px;
      line-height: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #333;
      }

      .value {
        color: #666;
      }
    }
  }
}
</style>
